<!DOCTYPE html>
<html>
<head>
    <title>全县产业分布-种植</title>
    <#include "/header.html">
    <script src="${request.contextPath}/statics/plugins/highcharts/highcharts.js"></script>
</head>
<body>
    <div class="panel panel-default">
        <div class="grid-btn">
            <div class="col-sm-2">
                <select id="villages" name="villages"  class="form-control">
                    <option value="0">请选择乡镇</option>
                </select>
            </div>
            <div class="col-sm-2">
                <select id="hamlet" name="hamlet" class="form-control">
                    <option value="0">请选择村组</option>
                </select>
            </div>
            <a id="search" class="btn btn-success">查询</a>
        </div>
    </div>
    <div class="panel panel-default">
        <ul id="myTab" class="nav nav-tabs">
            <li class="active">
                <a href="#grid" data-toggle="tab">
                    全县种植产业分布表
                </a>
            </li>
            <li class="chart">
                <a href="#chart" data-toggle="tab">
                    全县种植产业分布图
                </a>
            </li>
        </ul>
        <div id="myTabContent" class="tab-content">
            <div class="tab-pane fade in active" id="grid">
                <table id="jqGrid"></table>
            </div>
            <div class="tab-pane fade" id="chart">
                <div id="container" style="min-width: 800px; height: 400px; margin: 0 auto"></div>
            </div>
        </div>
    </div>
    <script>
        $(function () {
            $('#jqGrid').setGridWidth(($('.fade').width()));
            $.get(baseURL+'report/getDept?dataId=-1', function(data) {
                for (var i in data.dept) {
                    $("#villages").append("<option value='"+data.dept[i].value+"'>"+data.dept[i].name+"</option>");
                };
            });
            $('#villages').change(function(event) {
            $('#hamlet').html('<option value="0">请选择村组</option>');
                var villages = $("#villages").val();
                $.get(baseURL+'report/getDept?dataId='+villages, function(data) {
                    for (var i in data.dept) {
                        $("#hamlet").append("<option value='"+data.dept[i].value+"'>"+data.dept[i].name+"</option>");
                    };
                });
            });
            $("#jqGrid").jqGrid({
                autowidth: true,
                url: baseURL + 'report/seedlist',
                datatype: "json",
                colModel: [         
                    { label: '区县', name: 'countyName', width: 200 },   
                    { label: '乡镇', name: 'villagesName', width: 200 },       
                    { label: '村、组', name: 'hamletName', width: 200 },              
                    { label: '基地名称', name: 'name', width: 200 },         
                    { label: '规模（亩）', name: 'unitName', width: 200 }         
                ],
                viewrecords: true,
                height: (pageInfo().height-130),
                rowNum: 5000,
                jsonReader : {
                    root: "page",
                },
                gridComplete:function(){
                    //隐藏grid底部滚动条
                    $("#jqGrid").closest(".ui-jqgrid-bdiv").css({ "overflow-x" : "hidden" }); 
                }
            });
            $("#search").click(function(){
                if($('#villages').val()!="0"){
                    if($('#hamlet').val()!="0"){
                        $("#jqGrid").jqGrid('setGridParam',{ 
                            postData:{'villages': $('#villages').val(),'hamlet':$('#hamlet').val()}
                        }).trigger("reloadGrid");
                    }else{
                        $("#jqGrid").jqGrid('setGridParam',{ 
                            postData:{'villages': $('#villages').val(),'hamlet':""}
                        }).trigger("reloadGrid");
                    }
                }else{
                    $("#jqGrid").jqGrid('setGridParam',{ 
                        postData:{'villages':"",'hamlet':""}
                    }).trigger("reloadGrid");
                }
            });
            var dat=[];
            var data=[];
            $.get(baseURL+"report/estatedistributeReport", function(r){
                if(r.data.value!=null){
                    for (var i = 0; i < r.data.value.length; i++) {
                        dat.push(r.data.value[i].text);
                        data.push(r.data.value[i].value);
                    }
                }
                $('#container').highcharts({
                    chart: {
                        type: 'column',
                        zoomType: 'x'
                    },
                    title: {
                        text: '全县产业分布-种植',
                    },
                    xAxis: {
                        categories: dat
                    },
                    yAxis: {
                        min: 0,
                        title: {
                            text: '面积 (亩)'
                        }
                    },
                    tooltip: {
                        headerFormat: '<span>{point.key}</span><table>',
                        pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                            '<td style="padding:0"><b>{point.y:.1f} (亩)</b></td></tr>',
                        footerFormat: '</table>',
                        shared: true,
                        useHTML: true
                    },
                    plotOptions: {
                        series: {
                            cursor: 'pointer',
                            point: {
                                events: {
                                    click: function () {
                                        alert(this.series.name + "," + this.x + "," + this.y)
                                    }
                                }
                            },
                            marker: {
                                lineWidth: 1
                            }
                        }
                    },
                    series: [{
                        name: '种植数量',
                        data: data
                    }]
                });
            });
        });
    </script>
</body>